<template>
  <div class="my-settings" v-if="!getIsPhone">
    <div class="security border-bottom">
      <div class="item">
        <div class="top">
          <span class="icon" v-for="(item, index) in starts" :key="index">
            <i class="iconfont iconshezhi_wujiaoxing" :class="index + 1 <= accountInfo.securityLevel ? 'active' : ''"></i>
          </span>
        </div>
        <div class="bottom">
          <span class="text">您的账号安全级别为中,可以通过完善安全信息提高级别</span>
        </div>
      </div>
    </div>
    <div class="settings box-shadow"> 
      <setting-account></setting-account>
    </div>
  </div>
  <div class="my-settings" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        设置
      </template>
    </header-template-phone>
    <div class="main">
      <bill-board>
        <div class="security-level">
          <div class="top">
            <span class="icon" v-for="(item, index) in starts" :key="index">
              <i class="iconfont iconshezhi_wujiaoxing" :class="index + 1 <= accountInfo.securityLevel ? 'active' : ''"></i>
            </span>
          </div>
          <div class="bottom">
            <span class="text">您的账号安全级别为中,可以通过完善安全信息提高级别</span>
          </div>
        </div>
      </bill-board>
      <div class="settings"> 
        <div class="item-wrapper box-shadow">
          <setting-item-phone v-for="item in accSettings" :key="item.name">
            <template v-slot:icon>
              <i class="iconfont" :class="item.icon"></i>
            </template>
            <template v-slot:text>
              <div class="text">
                <span class='title'>
                  <span v-if="!item.bindData" class="status">
                    <span>
                      {{item.unbindTitle}}：<span class="notice">未绑定</span>
                    </span>
                    <span class="operate" @click="handleBinding(item.name)">绑定</span>
                  </span>
                  <span class="status" v-else>{{item.bindTitle}}：{{item.bindData}}</span>
                </span>
                <span class="note">{{item.note}}</span>
              </div>
            </template>
          </setting-item-phone>
        </div>
      </div>
      <div class="settings"> 
        <div class="item-wrapper box-shadow">
          <setting-item-phone v-for="item in pwdSettings" :key="item.name">
            <template v-slot:icon>
              <i class="iconfont" :class="item.icon"></i>
            </template>
            <template v-slot:text>
              <div class="text">
                <span class='title'>
                  <span v-if="!item.bindData" class="status">
                    <span>
                      {{item.unbindTitle}}
                    </span>
                    <span class="operate" @click="handleSetting(item.name)">设置</span>
                  </span>
                  <span class="status" v-else>
                    <span>
                      {{item.bindTitle}}
                    </span>
                    <span class="operate">修改</span>
                  </span>
                </span>
                <span class="note">{{item.note}}</span>
              </div>
            </template>
          </setting-item-phone>
        </div>
      </div>
      <div class="logout">
        <div class="btn button-selected">
          <span class="icon">
            <i class="iconfont"></i>
          </span>
          <span class="text">退出登陆</span>
        </div>
      </div>
    </div>
    <div class="settings-detail" ref="modal" v-if="currentComponent !== ''">
      <components :is="currentComponent" @click="handleHideLayer" @pop="popMsg"></components>
    </div>
    <!-- 提示框 -->
    <div class="info-tip" v-show="showPop">
      <slot>
        <div class="content">
          <span class="context">{{savePop}}</span>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import BillBoard from '@/components/base/bill-board/bill-board'
import HeaderBack from '@/components/base/header-back/header-back'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import SettingItem from './seting-item'
import SettingItemPhone from './setting-item-phone'
import SettingsPhone from './settings-phone'
import SettingsWechat from './settings-wechat'
import SettingsDebitCard from './settings-debitcard'
import SettingsLoginPwd from './settings-LoginPwd'
import SettingsPayPwd from './settings-PayPwd'
import SettingsFastPwd from './settings-FastPwd'
import SettingsSecureQuestions from './settings-securequestions'

import SettingAccount from '../pc-settings/settingAccount'

import { mapGetters } from 'vuex';
export default {
  components: {
    BillBoard,
    SettingItem,
    HeaderTemplatePhone,
    HeaderBack,
    SettingItemPhone,
    SettingsPhone,
    SettingsWechat,
    SettingsDebitCard,
    SettingsLoginPwd,
    SettingsPayPwd,
    SettingsFastPwd,
    SettingsSecureQuestions,
    SettingAccount
  },
   data() {
    return {
      accountInfo: {
        securityLevel: 3,
        accountName: 'vip999',
        accountType: 0,
        balance: 888888,
        refundRate: [
          {
            id: 1,
            name: '彩票返点',
            rate: '2.5%'
          },
          {
            id: 2,
            name: 'AG返点',
            rate: '1.00%'
          },
          {
            id: 3,
            name: '皇冠返水',
            rate: '1.25%'

          },
          {
            id: 4,
            name: '工资',
            rate: '0.05%'

          },
          {
            id: 5,
            name: '分红',
            rate: '0.00%'
          }
        ],
        balances: [
          {
            id: 1,
            icon: '',
            name: '积分余额',
            balance: 5000
          },
          {
            id: 2,
            icon: '',
            name: 'AG余额',
            balance: 5000, 
          },
          {
            id: 3,
            icon: '',
            name: 'BBin余额',
            balance: 0
          },
          {
            id: 4,
            icon: '',
            name: '捕鱼王余额',
            balance: 5000
          },
          {
            id: 5,
            icon: '',
            name: 'MG余额',
            balance: 5000
          },
          {
            id: 6,
            icon: '',
            name: 'CQ9余额',
            balance: 5000
          }
        ],
        settings: [
          {
            name: 'Phone',
            icon: 'iconnav_shoujigoucai',
            bindTitle: '已绑定手机号',
            unbindTitle: '手机号',
            bindData: '',
            note: '获取实时验证码是，保证账户资金安全',
          },
          {
            name: 'Wechat',
            icon: 'iconshezhi_weixin',
            bindTitle: '已绑定微信号',
            unbindTitle: '微信号',
            bindData: '',
            note: '获取实时验证码是，保证账户资金安全',
          },
          {
            name: 'DebitCard',
            icon: 'iconshezhi_yinhangka',
            bindTitle: '已绑定银行卡',
            unbindTitle: '银行卡',
            bindData: '',
            note: '用于提现的银行卡',
          },
          {
            name: 'LoginPwd',
            icon: 'iconshezhi_denglumima',
            bindTitle: '登陆密码',
            unbindTitle: '登陆密码',
            bindData: '',
            note: '建议使用字母和数字的组合，混合大小写，在组合中加入先换线等符号。',
          },
          {
            name: 'PayPwd',
            icon: 'iconshezhi_zhifumima',
            bindTitle: '支付密码',
            unbindTitle: '支付密码',
            bindData: '',
            note: '申请取款时使用的密码。',
          },
          {
            name: 'FastPwd',
            icon: 'iconshezhi_kuaijiemima',
            bindTitle: '快捷密码',
            unbindTitle: '快捷密码',
            bindData: '',
            note: '九宫格密码。',
          },
          {
            name: 'SecureQuestions',
            icon: 'iconshezhi_anquanwenti',
            bindTitle: '安全问题',
            unbindTitle: '安全问题',
            bindData: '',
            note: '绑定后可以通过安全问题找回账号资料。',
          },
        ]
         
      },
      currentComponent: '',
      accountType: ['代理'],
      activeBalanceIndex: -1,
      isRefreshFinish: true,
      starts: [1,2,3,4,5],
      savePop: '',
      showPop: false,
      delay: 2000
    }
  },
  methods: {
    handleMouseEnter(index) {
      this.activeBalanceIndex = index
    },
    handleMouseLeave() {
      this.activeBalanceIndex = -1
    },
    handleRefresh() {
      this.isRefreshFinish = false
      setTimeout(() => {
        this.isRefreshFinish = true
      }, 1000)
    },
    handleBinding(name) {
      this.currentComponent = 'Settings' + name
    },
    handleSetting(name) {
      if (name == 'FastPwd') {
        this.currentComponent = 'SettingsFastPwd'
        this.$nextTick(() => {
          this.$refs.modal.style.background = 'none'
        })
      } else {
        this.currentComponent = 'Settings' + name
      }
    },
    handleHideLayer() {
      this.currentComponent = ''
    },
    popMsg(e) {
      try {
        this.showPop = true
        this.savePop = e
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.showPop = false
        }, this.delay)
      } catch (error) {
        this.savePop = ''
        this.showPop = false
      }
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    accSettings() {
      return this.accountInfo.settings.slice(0, 3)
    },
    pwdSettings() {
      return this.accountInfo.settings.slice(3)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@import '~@/assets/styles/mixins.styl'
@media screen and (min-width 750px)
  .security
    display flex 
    background #fff 
    box-sizing border-box 
    padding 0 20px
    .item 
      height 48px 
      display flex 
      flex-direction column 
      justify-content space-around
      align-items flex-start
      box-sizing border-box 
      margin 16px 0
      .top 
        color $color-sub-grey
        .iconfont 
          margin-right 5px
          &.active 
            color $color-theme-red 
  .settings 
    display flex 
    flex-wrap wrap
    background #fbf9f9
    .icon
      display inline-block 
      width 48px 
      height 48px 
      border-radius 50% 
      background $color-theme-red
    .text 
      height 48px 
      display flex 
      flex-direction column 
      justify-content space-between 
      .note 
        margin-top 10px
@media screen and (max-width 750px)
  .main 
    box-sizing border-box 
    padding-top 48px  
    .settings 
      box-sizing border-box 
      padding 10px
      padding-bottom 0 
      .text
        .title 
          display flex
          .status 
            display flex 
            width 100%
            justify-content space-between
            box-sizing border-box 
            padding-right 10px
            margin-bottom 5px
            .notice 
              color $color-theme-red 
            .operate 
              color $color-theme-red
              extend-click()
        .note 
          color $color-sub-grey   
    .logout 
      box-sizing border-box 
      padding 0 10px 
      margin-top 25px
      margin-bottom 10px
      .btn 
        width 100% 
        height 44px 
        line-height 44px 
        text-align center
        .text 
          font-size 15px
  .settings-detail 
    position fixed 
    top 0
    left 0 
    right 0
    bottom 0
    background #fff
    z-index 100001

  .main >>> .bg-bar 
    display none
  .main >>> .content 
    margin 0 !important
  .security-level 
    height 48px 
    display flex 
    flex-direction column 
    justify-content space-around
    align-items flex-start
    background $color-text-button
    padding 16px 10px
    .top 
      color $color-sub-grey
      .iconfont 
        margin-right 5px
        &.active 
          color $color-theme-red 
  .info-tip
    position: fixed
    top: 50%
    left 50%
    transform translate(-50%, -50%)
    width: 130px
    height 45px
    line-height 45px
    z-index: 100002
    border-radius 3px 
    background: rgba(#313030, 0.9)
    color #fff
    &.drop-enter-active, &.drop-leave-active
      transition: all 0.2s
    &.drop-enter, &.drop-leave-to
      transform: opacity 0
    .content 
      display flex 
      align-items center
      justify-content center
  
    
             
</style>